<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link type="text/css" rel="stylesheet" href="css/style.css" />
  <!--[if IE 6]>
    <script src="js/iepng.js" type="text/javascript"></script>
        <script type="text/javascript">
           EvPNG.fix('div, ul, img, li, input, a'); 
        </script>
    <![endif]-->

  <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
  <script type="text/javascript" src="js/menu.js"></script>

  <script type="text/javascript" src="js/select.js"></script>


  <title>收货地址修改</title>
</head>

<body>

  <div id="app">

    <div>
      <div class="mem_tit">
        <h1>收货地址修改</h1>
      </div>

      <table border="0" class="add_tab" style="width:930px;" cellspacing="0" cellpadding="0">
        <tr>
          <td width="135" align="right">收货地址</td>
          <td style="font-family:'宋体';"><input type="text" name="address" v-model="address" class="add_ipt" />（必填）</td>
          <td align="right">收货人姓名</td>
          <td style="font-family:'宋体';"><input type="text" value="姓名" class="add_ipt" v-model="user.userName" readonly />（必填）</td>
        </tr>
        <tr>
          <td align="right">备注</td>
          <td style="font-family:'宋体';"><input type="text" value="备注" v-model="remark" class="add_ipt" />（必填）</td>
          <td align="right">电子邮箱</td>
          <td style="font-family:'宋体';"><input type="text" value="12345678@qq.com" class="add_ipt" v-model="user.email"  readonly/>（必填）</td>
        </tr>
        <tr>
          <td align="right">手机</td>
          <td style="font-family:'宋体';"><input type="text" value="1361234587" class="add_ipt" readonly v-model="user.mobile" />（必填）</td>
        </tr>

      </table>
      <p align="right">
        <a a href="javascript:;" @click="UpdateAddress()" class="add_b">确认修改</a>
      </p>
    </div>
  </div>


</body>

</html>

<!-- 官网提供的 axios 在线地址 -->
<!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
<script src="js/axios.min.js"></script>
<script src="js/vue.js"></script>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      id: "",
      address: "",
      remark: "",
      user:"",

    },
    methods: {
      UpdateAddress: function () {
        this.id = decodeURI(window.location.href).split("=")[1];
        if (this.address == "") {
          alert("地址不能为空");
          return;
        }
        if (this.remark == "") {
          alert("备注不能为空");
          return
        }
        var that = this;
        axios.get("http://localhost:8080/address/updateAddress?address=" + this.address + "&remark=" + this.remark + "&id=" + this.id).then(
          function (response) {
            // console.log(response)
            if(response.status==200){
              alert("修改成功");
            }
            window.location="Member_Address.html";
          },
          function (err) {
            alert(出错了);
          }
        )

      },
      showUserId: function () {
        var id = localStorage.getItem("loginInfo");
        // alert(id)
        this.userId = id;
        var that = this;
        axios.get("http://localhost:8080/user/showUser?id=" + id).then(
          function (response) {
            console.log(response.data.data)
            that.user = response.data.data;
          },
          function (err) {
            alert(出错了);
          }
        )

      },

    },
    created() {
      
      // this.showAddressPageByUserId(1);
      this.showUserId();
    }
  })
</script>